<template>
     <view class="note-content">
         <!-- 公共组件-每个页面必须引入 -->
         <public-module></public-module>
         <wlk-navbar :isShowTransparentTitle="false" navbarType='3'></wlk-navbar>
         <view v-if="!loading">
             <block v-if="note.status=='hidden'">
                 <view class="not-data">
                     <u-empty
                             :icon="uEmpty.data"
                             text="数据为空"
                     >
                     </u-empty>
                 </view>
             </block>
             <block v-else>
                 <view class="name">{{note.name}}</view>
                 <view class="time col9 wlkflex justify-between">
                     <view>
                         <span class="mr10">阅读</span>{{note.read}}
                     </view>
                     <view>
                         {{$u.timeFormat(note.createtime, 'mm月dd日')}}
                     </view>
                 </view>
                 <view>
                     <u-parse :content="note.content" :selectable="true"></u-parse>
                 </view>
                 <view class="fixed-info wlkflex justify-between">
                     <view class="share-info wlkflex justify-between">
                         <view class="like-icon wlkflex justify-center" @click="setNoteLike">
                             <u-icon name="heart-fill" v-if="note.hasLike" color="#FF2C3C" size="24"></u-icon>
                             <u-icon name="heart-fill" v-else color="#FFFFFF" size="24"></u-icon>

                         </view>
                         <!-- #ifdef H5 || MP-WEIXIN -->
                         <block  v-if="platform=='wxMiniProgram'" >
                             <button open-type="share" @share='onShareAppMessage' :data-obj="item" >
                                 <view class="share-icon wlkflex justify-center">
                                     <u-icon name="share" color="#FFFFFF" size="24"></u-icon>
                                 </view>
                             </button>
                         </block>
                         <block v-if="platform=='wxOfficialAccount'">
                             <view class="share-icon wlkflex justify-center" @click="shareShow=true">
                                 <u-icon name="share" color="#FFFFFF" size="24"></u-icon>
                             </view>
                         </block>
                         <!-- #endif -->
                     </view>
                     <view class="note-line" @click="show=true" v-if="note.lines?note.lines.length>0:false" :style="'background-color:'+themeColor">
                         文中线路({{note.lines.length}})
                     </view>
                 </view>
                 <u-popup :show="show" closeable  :round="20" safeAreaInsetBottom closeOnClickOverlay @close="show=false">
                     <view class="line-popup">
                         <view class="line-title">
                             文中线路
                         </view>
                         <scroll-view scroll-y="true" class="line-box">
                             <view class="line-item wlkflex justify-between" v-for="(line,index) in note.lines" :key=line.id  @click="jump('/pages/line/detail?id='+line.id)">
                                 <view class="item-image">
                                     <image class="wd100 hg100" :src="line.images[0]"  mode="aspectFill"/>
                                 </view>
                                 <view class="item-info wlkflex wrap align-content-between">
                                     <view class="u-line-2 title">{{line.title}}</view>
                                     <view class="wd100  wlkflex justify-between">
                                         <view class="price-info">
                                             <block  v-if="line.minprice>0">
                                                 <span>￥</span>
                                                 <span class="price">{{line.minprice}}</span>
                                                 <span class="ml05">起</span>
                                             </block>
                                             <block v-else>
                                                 <span class="col9">暂无库存</span>
                                             </block>
                                         </view>
                                         <view class="buy-btn" :style="'background-color:'+themeColor">
                                             预订
                                         </view>
                                     </view>
                                 </view>
                             </view>
                         </scroll-view>
                     </view>
                 </u-popup>
                 <u-overlay :show="shareShow" @click="shareShow = false">
                     <view class="wd100 hg100">
                         <image src="/static/images/other/share.png" class="share-image" mode="widthFix"></image>
                     </view>
                 </u-overlay>
             </block>

         </view>
     </view>
</template>

<script>
    import { toUrl,formatRichText } from '@/wlkutils/tools';
    import platform from "@/wlkutils/platform";
    import share from "@/wlkutils/share";
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
        data() {
            return {
                id:'',
                note:{},
                show:false,
                shareShow:false,
                loading:true,
                platform:platform.get()
            };
        },
        computed: {
            ...mapGetters(['themeColor','uEmpty'])
        },
        onLoad(options) {
            this.id = this.$Route.query.id;
            this.getData();

        },
        onShow() {
        },
        onShareAppMessage(res){
            let data = new Object();
            data.title = this.note.name;
            data.params = {id:this.id};
            data.imageUrl = this.note.image;
            return share.setShareInfo(data);
        },
        methods: {
            getData() {
                uni.$u.http.post('note/getNote', {
                    id:this.id
                }).then(res => {
                    this.note = res.data.note;
                    this.initShareInfo();
                    if (!uni.$u.test.isEmpty(this.note.content)) {
                        this.note.content = formatRichText(this.note.content);
                    }
                    this.loading = false;
                    }).catch(res => {
                })
            },
            initShareInfo(){
                let data = new Object();
                data.title = this.note.name;
                data.params = {id:this.id};
                data.imageUrl = this.note.image;
                setTimeout(function () {
                    return share.setShareInfo(data);
                },200)

            },
            async setNoteLike() {
                let res = await uni.$u.http.post('note/setNoteLike', {
                    id:this.id,
                    type:this.note.hasLike?'del':'insert'
                });
                if(res){
                    uni.$u.toast(res.msg)
                    this.note.hasLike = !this.note.hasLike;
                }
            },
            jump(path){
                toUrl(path);
            },

        }
	}
</script>

<style lang="scss">
    page{
        background-color: white;
        .note-content{
            padding-bottom: 100rpx;
            width: 92%;
            margin: 0 auto;
            .name{
                font-size: 34rpx;
                font-weight: bold;
                margin-top: 30rpx;
            }
            .time{
                font-size: $font-base;
                margin-bottom: 40rpx;
                margin-top: 40rpx;
            }
            .fixed-info{
                position: fixed;
                bottom: 25rpx;
                width: 92%;
                .share-info{
                    width: 28%;
                    color: white;
                    .like-icon{
                        width: 75rpx;
                        height: 75rpx;
                        border-radius: 50%;
                        background-color:$uni-bg-color-mask;
                    }
                    .share-icon{
                        width: 75rpx;
                        height: 75rpx;
                        border-radius: 50%;
                        background-color:$uni-bg-color-mask;
                    }
                }
                .note-line{
                    height: 75rpx;
                    line-height: 75rpx;
                    text-align: center;
                    padding:0 40rpx;
                    color: #FFFFFF;
                    border-radius: 50rpx;
                    font-size: $font-lt;
                }
            }
        }
        .line-popup{
            min-height:450rpx;
            max-height: 1200rpx;
            .line-title{
                border-radius: 20px;
                line-height: 90rpx;
                text-align: center;
                background-color: #FFFFFF;
            }
            .line-box{
                background-color: #F3F3F3;
                padding: 20rpx;
                max-height: 1200rpx;
                .line-item{
                    border-radius: 4px;
                    background-color: #FFFFFF;
                    padding: 20rpx;
                    margin-bottom: 20rpx;
                    .item-image{
                        width: 30%;
                        height: 200rpx;
                        border-radius: 4px;
                        overflow: hidden;
                    }
                    .item-info{
                        width: 67%;
                        height: 190rpx;
                        .title{
                            font-size: $font-lt;
                            font-weight: bold;
                        }
                        .price-info{
                            color: $-tour-price-color;
                            font-size: $font-base;
                            .price{
                                font-size: $font-max;
                            }
                        }
                        .buy-btn{
                            color: #FFFFFF;
                            font-size: $font-base;
                            padding: 5rpx 30rpx;
                            border-radius: 30rpx;
                        }
                    }
                }
            }
        }
        .share-image{
           width:100%;
        }
    }
</style>
